<!-- PCAS -->
<!-- PCAS -->
<!-- PCAS -->
<!-- PCAS -->
<!-- PCAS -->
<template>
    <div class="pcas_chooser">
        <div class="bar" @click.stop="barClick">
            <span v-show="xhS">
                {{ xhP }} - {{ xhC }} - {{ xhA }} - {{ xhS }}
            </span>
        </div>

        <div class="menu" v-show="showmenu" @click.stop>
            <div class="header">
                <em v-show="p" @click="p = ''; c = ''; a = ''; s = ''">{{ p }}</em>
                <em v-show="!p" class="qingxuanze">请选择省</em>

                <em v-show="c" @click="c = ''; a = ''; s = ''">{{ c }}</em>
                <em v-show="p && !c" class="qingxuanze">请选择市</em>

                <em v-show="a" @click="a = ''; s = ''">{{ a }}</em>
                <em v-show="c && !a" class="qingxuanze">请选择县</em>

                <em v-show="s">{{ s }}</em>
                <em v-show="a && !s" class="qingxuanze">请选择镇</em>
            </div>

            <div v-if="all_pcas != null" style="line-height: 20px;">
                <!-- 罗列所有省 -->
                <div v-if="p == ''">
                    <span v-for="(v, k) in all_pcas" :key="k" @click="p = k; c = ''; a = ''">
                        {{ k }}
                    </span>
                </div>

                <!-- 罗列当前p省的所有市 -->
                <div v-if="p && c == ''">
                    <span v-for="(v, k) in all_pcas[p]" :key="k" @click="c = k; a = ''">
                        {{ k }}
                    </span>
                </div>

                <!-- 罗列当前p省c市的所有县（区） -->
                <div v-if="c && a == ''">
                    <span v-for="(v, k) in all_pcas[p][c]" :key="k" @click="a = k; s = ''">
                        {{ k }}
                    </span>
                </div>


                <!-- 罗列当前p省c市a县（区）的所有镇（街道） -->
                <div v-if="a">
                    <span v-for="(item, index) in all_pcas[p][c][a]" :key="index" @click="done(item)">
                        {{ item }}
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// 这个是通用组件，所以Ajax不要放到api文件夹中
import axios from 'axios';
export default {
    props: ['defaultP', 'defaultC', 'defaultA', 'defaultS'],
    async created() {
        const res = await axios.get('/api/pcas');

        this.all_pcas = res.data;

        // 鼠标点击别的地方，关闭菜单
        document.addEventListener('click', () => {
            this.showmenu = false;
        }, false);
    },
    data() {
        return {
            // 显示菜单
            showmenu: false,
            // 服务器给我们的所有数据
            all_pcas: null,
            // 省province
            p: this.defaultP || '',
            // 市city
            c: this.defaultC || '',
            // 县area
            a: this.defaultA || '',
            // 镇s
            s: this.defaultS || '',
            // 选好的
            xhP: this.defaultP || '',
            xhC: this.defaultC || '',
            xhA: this.defaultA || '',
            xhS: this.defaultS || '',
        }
    },
    methods: {
        // 点击bar做的事情
        barClick() {
            // 数据的重置
            this.p = this.xhP;
            this.c = this.xhC;
            this.a = this.xhA;
            this.s = this.xhS;

            // 显示菜单
            this.showmenu = true;
        },
        // 选好了，选了镇会触发这个函数
        done(s) {
            // 设计s值
            this.s = s;

            // 选好的PCAS值
            this.xhP = this.p;
            this.xhC = this.c;
            this.xhA = this.a;
            this.xhS = this.s;

            // 发给父组件
            this.$emit('done', {
                p: this.p,
                c: this.c,
                a: this.a,
                s: this.s,
            });

            this.showmenu = false;
        }
    },
}
</script>

<style lang="less">
.pcas_chooser {
    position: relative;

    .bar {
        width: 412px;
        height: 33px;
        border: 1px solid #dcdfe6;
        border-radius: 5px;
        cursor: pointer;
        line-height: 33px;
        padding-left: 10px;
        color: #606266;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .menu {
        width: 490px;
        padding: 10px;
        position: absolute;
        z-index: 999;
        left: 0;
        top: 40px;
        background-color: white;
        border-radius: 6px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.539);

        // LESS可以定义变量
        @xiantiaoyanse: #b4b4b4;

        .header {
            border-bottom: 1px solid @xiantiaoyanse;
            display: flex;
            height: 30px;

            em {
                line-height: 20px;
                font-style: normal;
                padding: 4px 10px;
                border: 1px solid @xiantiaoyanse;
                position: relative;
                top: 1px;
                margin-right: 10px;
                border-radius: 4px 4px 0 0;
                background-color: #f4f1f1;
                cursor: pointer;
                font-size: 13px;

                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

                &.qingxuanze {
                    background-color: #4bcdcd;
                    color: white;
                }
            }
        }

        span {
            line-height: 20px;
            font-size: 12px;
            text-decoration: underline;
            color: rgb(26, 118, 211);
            margin-right: 6px;
            margin-top: 10px;
            display: inline-block;
            cursor: pointer;

            &:hover {
                color: orange;
            }
        }
    }

}
</style>